@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import '@/styles/iconfont/iconfont.css';

@layer components {
  .alt {
    width: 100%;
    height: 100%;
    background: #1a191b
      url("data:image/svg+xml,%3Csvg width='50' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' fill='%23959292' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3EMOO%3C/text%3E%3C/svg%3E")
      no-repeat center/100%;
  }

  .mid{
    @apply !absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%];
  }

  .y-mid{
    @apply !absolute top-[50%] translate-y-[-50%];
  }

  .x-mid{
    @apply !absolute left-[50%] translate-x-[-50%];
  }

  .btn-zoom{
    @apply relative after:absolute after:top-[-10rpx] after:right-[-10rpx] after:bottom-[-10rpx] after:left-[-10rpx];
  }
}

@layer utilities {
  .repeat-0{
    animation-iteration-count: 0;
  }
  .repeat-1{
    animation-iteration-count: 1;
  }
  .repeat-infinite{
    animation-iteration-count: infinite;
  }

  @keyframes enter {
    0% {
      opacity: 0;
      transform: translateY(10px)
    }

    to {
      opacity: 1;
      transform: none
    }
  }

  .animate-enter {
    --stagger: 0;
    --delay: 120ms;
    --start: 0ms;
  }

  @media (prefers-reduced-motion:no-preference) {
    .animate-enter {
      animation: enter .6s both 1;
      animation-delay: calc(var(--stagger) * var(--delay) + var(--start));
    }
  }

  .animate-enter-content > .animate-content {
    --stagger: 0;
    --delay: 150ms;
    --start: 0ms;
    animation: enter 1s both 1;
    animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
  }
  .animate-enter-content > .animate-content:nth-child(1) { --stagger: 1; }
  .animate-enter-content > .animate-content:nth-child(2) { --stagger: 2; }
  .animate-enter-content > .animate-content:nth-child(3) { --stagger: 3; }
  .animate-enter-content > .animate-content:nth-child(4) { --stagger: 4; }
  .animate-enter-content > .animate-content:nth-child(5) { --stagger: 5; }
  .animate-enter-content > .animate-content:nth-child(6) { --stagger: 6; }
  .animate-enter-content > .animate-content:nth-child(7) { --stagger: 7; }
  .animate-enter-content > .animate-content:nth-child(8) { --stagger: 8; }

  @keyframes back {
    0% {
      transform: scale(.95);
    }
    100% {
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion:no-preference) {
    .animate-back {
      animation: back 1.5s both 1;
    }
  }
}

@layer base {
  page{
    --ios-bottom: env(safe-area-inset-bottom);
    --save-bottom: calc(150rpx + var(--ios-bottom));

    width: 100%;
    height: 100%;
    background-color: #1a191b !important;
  }

  ::-webkit-scrollbar{
    display: none;
  }

  ::before,
  ::after {
    --tw-content: '';
  }
}